import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { NavBar, List, Radio } from 'antd-mobile';

const RadioItem = Radio.RadioItem;

function SelectDoctorLevelListPage({ doctorLevelList, physicianAuth, dispatch }) {
  const { doctorLevels } = doctorLevelList;
  const { titleCode } = physicianAuth;
  function onSelectDoctorLevelSuccess(doctorLevel) {
    dispatch({
      type: 'physicianAuth/selectDoctorLevelSuccess',
      payload: doctorLevel,
    });
    dispatch(routerRedux.push('/physicianAuth'));
  }

  return (
    <div>
      <NavBar leftContent="返回" mode="light" onLeftClick={() => dispatch(routerRedux.push('/physicianAuth'))} >选择职称</NavBar>
      <List>
        {
          doctorLevels.map((item) => {
            return (
              <RadioItem
                key={item.code} checked={titleCode === item.code}
                onChange={() => onSelectDoctorLevelSuccess(item)}
              >
                {item.name}
              </RadioItem>
            );
          })
        }
      </List>
    </div>
  );
}

function mapStateToProps({ doctorLevelList, physicianAuth }) {
  return { doctorLevelList, physicianAuth };
}

export default connect(mapStateToProps)(SelectDoctorLevelListPage);
